<template>
    <div class='login-tab'>
        <ul class='login-tab-list'>
            <li 
                :class='tabFlag ? "active" : "" '
                @click =' tabFlag = !tabFlag'
            >
                卷皮账号登录
            </li>
            <li 
                :class='!tabFlag ? "active" : "" '
                @click =' tabFlag = !tabFlag'
            >
                手机快捷登录
            </li>
        </ul>
        <div class='juanpi-account'
            v-if = 'tabFlag'
        >
            <div class='input'>
                <input type="text" name="username" id="username" placeholder="手机号/邮箱/用户名" value="" class="normalInput"
                    ref ='username'
                >
            </div>
            <div class='input'>
                <input type="password" name="password" id="password" placeholder="密码" class="normalInput"
                    ref='password'
                >
            </div>
        </div>
        <Inputphone v-if = '!tabFlag'/>
    </div>
</template>

<script>
    import Inputphone from 'components/commons/input-phone.vue'
    export default{
        components:{
            Inputphone
        },
        data(){
            return{
                tabFlag : true
                
            }
        }
    }

</script>

<style lang="stylus" scoped>
@import '~assets/styles/_base.styl'
.login-tab

    .login-tab-list
        height .88rem
        display flex
        font-size .28rem
        line-height .88rem
        li  
            flex 1
            text-align center
            color #999
            &.active
                color $bg-color
                position relative
            &.active::after
                content ""
                position absolute
                bottom 0
                left .6rem
                right .6rem
                height 4px
                background $bg-color
    .input
        border-bottom 1px solid #ebebeb
        color #999
        input
            width 100%
            border 0
            height .96rem
            font-size .28rem
            outline none
    .quickLoginHmtl
        position relative
        .btn_get 
            position absolute
            top 0
            right 0
            height .96rem
            line-height .96rem
            font-size .28rem
            color #999

</style>